<template>
  <u-popup
    mode="bottom"
    v-model="showCouponPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> {{ popupTitle }} </view>

      <view class="coupon-list">
        <scroll-view class="scroll-section" scroll-y="true">
          <!-- <view class="cuxiao-box">
            <view class="cuxiao-title">{{$t('diy.promotion')}}</view>
            <view v-for="item in cardData" :key="item.id" class="cuxiao-content flex">
              <view>{{$t('diy.send')}}</view>
              <view >
                <view class="text-more-1">{{item.name}}</view>
                <view class="cuxiao-item-num">x1</view>
              </view>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view> -->
          <view
            class="coupon-item"
            v-for="(item, index) in coupons"
            :key="index"
          >
            <view class="coupon-top">
              <view class="coupon-name">
                <view class="name">{{ item.name }}</view>
                <view class="date">{{
                  item.expire_type != 1
                    ? item.begintime + "-" + item.endtime
                    : "领取" + item.expire_day + "天后失效"
                }}</view>
              </view>
              <view class="coupon-price">
                <view class="price">
                  <text v-if="item.discount_type != 1">¥</text>
                  <text v-if="item.discount_type != 1">{{
                    item.sub_price
                  }}</text>
                  <text v-if="item.discount_type == 1" style="font-size: 38rpx"
                    >{{ item.discount }}折</text
                  >
                </view>
                <view class="use-text">{{ item.content }}</view>
              </view>
            </view>
            <view class="split-line"></view>
            <view class="coupon-down">
              <view class="receive-box">
                <view class="label-text" @click="handleItemInfo(index)">
                  <text>{{ $t("facePay.detail") }}</text>
                  <i class="iconfont icon-arrow-down"></i>
                </view>
                <view
                  class="receive-btn"
                  :class="item.is_receive == 1 ? 'received' : ''"
                  @click="receiveCoupon(item, index)"
                  >{{ item.receive_content }}</view
                >
              </view>
              <view class="info-box" v-if="showInfoIndex == index">
                <view class="rule-text">{{ item.rule }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    couponList: {
      type: Array,
      default: [],
    },
    popupTitle: {
      type: String,
      default: "",
    },
    cardData: {
      type: Array,
      default: [],
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      showCouponPopup: false,
      showInfoIndex: -1,
      coupons: [],
    };
  },
  mounted() {
    this.coupons = JSON.parse(JSON.stringify(this.couponList));
  },
  watch: {},
  computed: {},
  methods: {
    hidePopup() {
      this.showCouponPopup = false;
    },
    showPopup() {
      this.showCouponPopup = true;
    },
    handleItemInfo(index) {
      if (this.showInfoIndex == index) {
        this.showInfoIndex = -1;
      } else {
        this.showInfoIndex = index;
      }
    },
    receiveCoupon(item, index) {
      if (item.is_receive == 0) {
        this.$allrequest.goods.couponReceive({ id: item.id }).then((res) => {
          if (res.code == 0) {
            this.coupons[index].is_receive = 1;
            this.coupons[index].receive_content = this.$t("coupon.getted");
            this.$utils.toast(this.$t("coupon.success"));
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }
  .coupon-list {
    width: 100%;
    height: 117vw;
    .scroll-section {
      width: 100%;
      height: 100%;
      .cuxiao-box {
        margin: 0 36rpx 26rpx;

        .cuxiao-title {
          margin: 24rpx 0 36rpx;
          font-size: 26rpx;
          line-height: 36rpx;
          color: #8c8c8c;
        }

        .cuxiao-content {
          margin-bottom: 26rpx;
          // content标题
          > view:nth-child(1) {
            margin: 0 28rpx 0 8rpx;
            padding: 2rpx 8rpx;
            height: 28rpx;
            line-height: 28rpx;
            box-sizing: content-box;
            font-size: 20rpx;
            color: #f1270c;
            background: #fee9e6;
            border-radius: 4rpx;
          }
          > view:nth-child(2) {
            flex: 1;
            width: 0;
            .cuxiao-item-num {
              margin-top: 5rpx;
            }
          }
          .icon-arrow-right {
            font-size: 28rpx;
          }
        }
      }
      .coupon-item {
        width: 90.4vw;
        padding: 0 4.8vw;
        border: 1px solid #f2f2f2;
        border-radius: 2.67vw;
        position: relative;
        margin: 0 auto 4.8vw;
        .coupon-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          padding: 3.73vw 0;
          .coupon-name {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 600;
              color: #262626;
            }
            .date {
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-top: 1.6vw;
            }
          }
          .coupon-price {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .price {
              display: flex;
              align-items: flex-end;
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 600;
              color: #f0250e;
              text:last-child {
                font-size: 56rpx;
                line-height: 57rpx;
              }
            }
            .use-text {
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
            }
          }
        }
        .split-line {
          width: 82.4vw;
          margin: 0 auto;
          border: 1px dashed #ededed;
        }
        .coupon-down {
          width: 100%;
          padding: 3.2vw 0;
          .receive-box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label-text {
              display: flex;
              align-items: center;
              text {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
              }
              .iconfont {
                color: #8c8c8c;
                margin-left: 1.33vw;
              }
            }
            .receive-btn {
              height: 6.4vw;
              background: #f0250e;
              border-radius: 3.2vw;
              padding: 0 3.2vw;
              text-align: center;
              line-height: 6.4vw;
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
            .received {
              background: #fee8e6;
              color: #f0250e;
            }
          }
          .info-box {
            margin-top: 3.2vw;
            .rule-text {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 40rpx;
              color: #8c8c8c;
            }
          }
        }
      }
      .coupon-item::before {
        content: "";
        width: 3.2vw;
        height: 3.2vw;
        background: #ffffff;
        border-right: 1px solid #f2f2f2;
        border-radius: 50%;
        position: absolute;
        left: -1.6vw;
        top: 18.13vw;
      }
      .coupon-item::after {
        content: "";
        width: 3.2vw;
        height: 3.2vw;
        background: #ffffff;
        border-left: 1px solid #f2f2f2;
        border-radius: 50%;
        position: absolute;
        right: -1.6vw;
        top: 18.13vw;
      }
    }
  }
  .close-icon {
    width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }
}
</style>
